<template>
  <div class="preview" ref="uppicBox">
    <img id="pic-img" ref="picImg" :src="mySrc"
         :style="{ 'transform':'scale('+transform.scale+','+transform.scale+')',
             '-webkit-transform':'scale('+transform.scale+','+transform.scale+')',
             '-moz-transform':'scale('+transform.scale+','+transform.scale+')',
             ' -ms-transform':'scale('+transform.scale+','+transform.scale+')',
             '-o-transform':'scale('+transform.scale+','+transform.scale+')',
             'width':width,'height':height}" alt="">
  </div>
</template>

<script>
  import "../../assets/lib/exif.js"
  import Hammer from "hammerjs"

  export default {
    name: "vue-priview",
    data() {
      return {
        transform: {
          'scale': 1,
          'x': 0,
          'y': 0
        },
        img: {
          Yh: 0,
          Yw: 0,
        },
        isuppicBox: false,
      }

    },
    props: {
      width: {
        type: String,
        default: '200px'
      },//图片宽
      height: {
        type: String,
        default: '200px'
      },//图片高
      mySrc: {
        type: String
      }//图片资源
    },
    methods: {

      /*初始化手势方法*/
      init() {
        let me = this;
        me.isuppicBox = true;
        let picImg = me.$refs.picImg;
        me.img.Yw = picImg.naturalWidth;
        me.img.Yh = picImg.naturalHeight;
        let mc = new Hammer.Manager(this.$refs.uppicBox);
        mc.add(new Hammer.Pan({threshold: 0, pointers: 0}));
        mc.add(new Hammer.Pinch({threshold: 0})).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Tap({event: 'doubletap', taps: 2}));
        mc.add(new Hammer.Tap());
        mc.on("doubletap", me.doubletap);
        mc.on("pinchstart pinchmove", me.pinchin);
      },

      /*双击方法*/
      doubletap(e) {
        let scale = this.transform['scale'];
        if (scale < 4) {
          this.transform['scale'] = scale * 1.2;
        }
        console.log('双击')
      },

      /*缩放方法*/
      pinchin(ev) {
        if (ev.type === 'pinchstart') {
          this.initScale = this.transform.scale || 1;
        }
        let scale = this.initScale * ev.scale;
        if (scale < 4) {
          this.transform.scale = scale;
        }
        console.log('缩放')
      },

    },
    mounted() {
      this.init();
    }

  }
</script>

<style lang="scss" scoped>
  .preview {
    width: 100%;
    height: 100%;
    margin: 10% auto;
    text-align: center;
  }
</style>
